import React from "react";
import LittleChart from "@c/pcLittleChart";
import style from "./style.module.css";
import Btn from "@c/pcBtn";
import BigChart from "@c/pcBigChart";
import { useState, useEffect } from 'react'
// icon图
import dingdan from "../../img/dingdanguanlix.svg";
import huiyuan from "../../img/yonghu.svg";
import shangping from "../../img/shangpin.svg";
import duanxin from "../../img/duanxinpeizhi.svg";
import xitong from "../../img/xitongshezhi.svg";
import wenzhang from "../../img/wenzhangguanli.svg";
import fenxiao from "../../img/fenxiaoguanli.svg";
import youhuiquan from "../../img/youhuiquan.svg";
import { getGongzuotai } from '@/api/request'

function WorkBenchPage() {
  let [date, setDate] = useState({});
  useEffect(async () => {
    let a = await getGongzuotai()
    setDate(a.data.data)
  }, [])
  useEffect(() => {
    console.log(date)
  }, [date])
  const iconList = [
    {
      name: "会员管理",
      icon: huiyuan,
    },
    {
      name: "系统设置",
      icon: xitong,
    },
    {
      name: "商品",
      icon: shangping,
    },
    {
      name: "订单管理",
      icon: dingdan,
    },
    {
      name: "短信配置",
      icon: duanxin,
    },
    {
      name: "文章管理",
      icon: wenzhang,
    },
    {
      name: "分销管理",
      icon: fenxiao,
    },
    {
      name: "优惠券",
      icon: youhuiquan,
    },
  ];
  return (
    <div className={style.workBox}>
      <div className={style.Work_header}>
        <LittleChart list={{ num: date.yxe, title: "销售额" }} />
        <LittleChart list={{ num: date.yhfw, title: "用户访问" }} />
        <LittleChart list={{ num: date.ddl, title: "订单量" }} />
        <LittleChart list={{ num: date.xyh, title: "新增用户" }} />
      </div>
      <div className={style.Work_center}>
        <Btn iconList={iconList} />
      </div>
      <div className={style.bottom}>
        <BigChart />
      </div>
    </div>
  );
}

export default WorkBenchPage;
